<!--终端管理-->

<!DOCTYPE html>
<html>

<head>
    <%- include ../taglib/layout-table.ejs %>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <!--<h5>操作：</h5>-->
                    <div class="">
                        <a onclick="fnClickAddRow();" href="javascript:void(0);" id="button" class="btn btn-primary ">增加1</a>
                        <a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">修改</a>
                        <a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">删除</a>
                    </div>
                    <div class="ibox-tools">

                        <!--<a class="collapse-link">-->
                        <!--<i class="fa fa-chevron-up"></i>-->
                        <!--</a>-->

                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">-->
                        <!--<i class="fa fa-wrench"></i>-->
                        <!--</a>-->
                        <!--<ul class="dropdown-menu dropdown-user">-->
                        <!--<li><a href="table_data_tables.html#">选项1</a>-->
                        <!--</li>-->
                        <!--<li><a href="table_data_tables.html#">选项2</a>-->
                        <!--</li>-->
                        <!--</ul>-->
                        <!--<a class="close-link">-->
                        <!--<i class="fa fa-times"></i>-->
                        <!--</a>-->
                    </div>
                </div>
                <div class="ibox-content">

                    <table id="example" class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>
                                <!--<input type="checkbox" class="checkall" />-->
                            </th>
                            <th>客户名称</th>
                            <th>设备号码</th>
                            <th>创建人</th>
                            <th>时间</th>
                            <th>部门id</th>

                        </tr>
                        </thead>

                        <tfoot>
                        <tr>
                            <th>
                                <!--<input type="checkbox" class="checkall" />-->
                            </th>
                            <th>部门名称</th>
                            <th>设备号码</th>
                            <th>创建人</th>
                            <th>时间</th>
                            <th>部门id</th>

                        </tr>
                        </tfoot>
                        <!--<thead>-->
                        <!--<tr>-->
                        <!--<th>Name</th>-->
                        <!--<th>Position</th>-->
                        <!--<th>Office</th>-->
                        <!--<th>Extn.</th>-->
                        <!--<th>Start date</th>-->
                        <!--<th>Salary</th>-->
                        <!--</tr>-->
                        <!--</thead>-->
                    </table>

                </div>
            </div>
        </div>
    </div>

</div>

<!--&lt;!&ndash; 全局js &ndash;&gt;-->
<!--<script src="js/jquery.min.js?v=2.1.4"></script>-->
<!--<script src="js/bootstrap.min.js?v=3.3.6"></script>-->


<!--<script src="js/plugins/jeditable/jquery.jeditable.js"></script>-->

<!-- Data Tables -->
<!--<script src="js/plugins/dataTables/jquery.dataTables.js"></script>-->
<!--<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>-->

<%- include ../taglib/layout-content.ejs %>


<!-- Page-Level Scripts -->
<script>
    //    $(document).ready(function () {
    ////        $('.dataTables-example').dataTable();
    ////        var table = $('#dataTables-example').DataTable({
    //////            "dom": '<"top"f >rt<"bottom"ilp><"clear">',//dom定位
    //////            "dom": 'tiprl',//自定义显示项
    //////            "dom":'<"domab"f>',
    //////            "scrollY": "220px",//dt高度
    //////            "lengthMenu": [
    //////                [8, 6, 8, -1],
    //////                [4, 6, 8, "All"]
    //////            ],//每页显示条数设置
    //////            "lengthChange": false,//是否允许用户自定义显示数量
    //////            "bPaginate": true, //翻页功能
    //////            "bFilter": false, //列筛序功能
    //////            "searching": true,//本地搜索
    //////            "ordering": true, //排序功能
    //////            "Info": true,//页脚信息
    //////            "autoWidth": true,//自动宽度
    //////            "oLanguage": {//国际语言转化
    //////                "oAria": {
    //////                    "sSortAscending": " - click/return to sort ascending",
    //////                    "sSortDescending": " - click/return to sort descending"
    //////                },
    //////                "sLengthMenu": "显示 _MENU_ 记录",
    //////                "sZeroRecords": "对不起，查询不到任何相关数据",
    //////                "sEmptyTable": "未有相关数据",
    //////                "sLoadingRecords": "正在加载数据-请等待...",
    //////                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
    //////                "sInfoEmpty": "当前显示0到0条，共0条记录",
    //////                "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
    //////                "sProcessing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加载数据...",
    //////                "sSearch": "模糊查询：",
    //////                "sUrl": "",
    //////                //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
    //////                "oPaginate": {
    //////                    "sFirst": "首页",
    //////                    "sPrevious": " 上一页 ",
    //////                    "sNext": " 下一页 ",
    //////                    "sLast": " 尾页 "
    //////                }
    //////            },
    ////
    ////            "columnDefs": [
    ////                {
    ////                    orderable: false,
    ////
    ////                    targets: 0 },
    ////                {
    ////                    orderable: false,
    ////
    ////                    targets: 1 }
    ////            ],//第一列与第二列禁止排序
    ////
    ////            "order": [
    ////                [0, null]
    ////            ],//第一列排序图标改为默认
    ////            initComplete: function () {//列筛选
    ////                var api = this.api();
    ////                api.columns().indexes().flatten().each(function (i) {
    ////                    if (i != 0 && i != 1) {//删除第一列与第二列的筛选框
    ////                        var column = api.column(i);
    ////                        var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
    ////                        var select = $('<select><option value="">All</option></select>')
    ////                            .appendTo($(column.header()))
    ////                            .on('click', function (evt) {
    ////                                evt.stopPropagation();
    ////                                var val = $.fn.dataTable.util.escapeRegex(
    ////                                    $(this).val()
    ////                                );
    ////                                column
    ////                                    .search(val ? '^' + val + '$' : '', true, false)
    ////                                    .draw();
    ////                            });
    ////                        column.data().unique().sort().each(function (d, j) {
    ////                            function delHtmlTag(str) {
    ////                                return str.replace(/<[^>]+>/g, "");//去掉html标签
    ////                            }
    ////
    ////                            d = delHtmlTag(d)
    ////                            select.append('<option value="' + d + '">' + d + '</option>')
    ////                            $span.append(select)
    ////                        });
    ////
    ////                    }
    ////                });
    ////
    ////            }
    ////
    ////        });
    ////
    ////        //添加索引列
    ////        table.on('order.dt search.dt',
    ////            function () {
    ////                table.column(0, {
    ////                    search: 'applied',
    ////                    order: 'applied'
    ////                }).nodes().each(function (cell, i) {
    ////                    cell.innerHTML = i + 1;
    ////                });
    ////            }).draw();
    ////
    ////        //自定义搜索
    ////        $('.dsearch').on('keyup click', function () {
    ////            var tsval = $(".dsearch").val()
    ////            table.search(tsval, false, false).draw();
    ////        });
    ////
    ////        //checkbox全选
    ////        $("#checkAll").on("click", function () {
    ////            if ($(this).prop("checked") === true) {
    ////                $("input[name='checkList']").prop("checked", $(this).prop("checked"));
    ////                $('#example tbody tr').addClass('selected');
    ////            } else {
    ////                $("input[name='checkList']").prop("checked", false);
    ////                $('#example tbody tr').removeClass('selected');
    ////            }
    ////        });
    ////
    ////        //显示隐藏列
    ////        $('.toggle-vis').on('change', function (e) {
    ////            e.preventDefault();
    ////            console.log($(this).attr('data-column'));
    ////            var column = table.column($(this).attr('data-column'));
    ////            column.visible(!column.visible());
    ////        });
    ////
    ////        //删除选中行
    ////        $('#example tbody').on('click', 'tr input[name="checkList"]', function () {
    ////            var $tr = $(this).parents('tr');
    ////            $tr.toggleClass('selected');
    ////            var $tmp = $('[name=checkList]:checkbox');
    ////            $('#checkAll').prop('checked', $tmp.length == $tmp.filter(':checked').length);
    ////
    ////        });
    ////
    ////        $('#button').click(function () {
    ////            table.row('.selected').remove().draw(false);
    ////        });
    ////
    ////        $('.showcol').click(function () {
    ////            $('.showul').toggle();
    ////
    ////        })
    ////
    ////        //获取表格宽度赋值给右侧弹出层
    ////        wt = $('.wt100').width();
    ////        $('.showslider').css('right', -wt);
    ////
    ////        //关闭右侧弹出层
    ////        $('.closediv').click(function () {
    ////            $(this).parent('.showslider').animate({
    ////                right: -wt
    ////            }, 200)
    ////            $('.clickdom').attr('isclick', true)
    ////        });
    ////
    ////
    ////    });
    //
    //    //右侧弹出详情层
    //    /*  var flag=false;
    //             function clickDom(obj){
    //             var  $par=$(obj).parents('#example_wrapper').siblings('.showslider')
    //             var  isattr=$(obj).attr('isclick');
    //             if(isattr=="true"){
    //             if(flag){
    //             $par.animate({
    //             right:-wt
    //             },200)
    //             flag=!flag
    //             }
    //             else{
    //             $par.animate({
    //             right:0
    //             },200)
    //             flag=!flag
    //      
    //             }
    //             }
    //             $('.clickdom').attr('isclick',false)
    //             $(obj).attr('isclick',true)
    //      
    //      
    //             }
    //             */
    //    function clickDom(obj) {
    //        var $par = $(obj).parents('#example_wrapper').siblings('.showslider')
    //        var isattr = $(obj).attr('isclick');
    //        if (isattr == "false") {
    //
    //        } else {
    //            $par.animate({
    //                right: -wt
    //            }, 200)
    //            $par.animate({
    //                right: 0
    //            }, 400)
    //            $('.clickdom').attr('isclick', true)
    //            $(obj).attr('isclick', false)
    //        }}
    //
    //
    //
    //
    //    function fnClickAddRow() {
    //        $('#editable').dataTable().fnAddData([
    //            "Custom row",
    //            "New row",
    //            "New row",
    //            "New row",
    //            "New row"]);
    //
    //    }
    $(document).ready(function () {
//    $('.dataTables-example tfoot th').each( function () {
//        var title = $('.dataTables-example thead th').eq( $(this).index() ).text();
//        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
//    } );
        var table = $('.dataTables-example').dataTable({
//        "bProcessing": true,
//        "bServerSide": true,
//        "sPaginationType": "full_numbers",
//        /*使用post方式 */
//         "fnServerData": function ( sSource, aoData, fnCallback ) {
//         $.ajax( {
//             "dataType": 'json',
//             "type": "POST",
//             "url": sSource,
//             "data": aoData,
//             "success": fnCallback
//             } );
//         }
//
////        "sAjaxSource": "./server_processing.php",
////        "oLanguage": {
////            "sUrl": "cn.txt"
////        },
//        "aoColumns": [
//            { "sName": "platform" },
//            { "sName": "version" },
//            { "sName": "engine" },
//            { "sName": "browser" },
//            { "sName": "grade" }
//        ]//$_GET['sColumns']将接收到aoColumns传递数据
//                 $.ajax( {
//             "dataType": 'json',
//             "type": "POST",
//             "url": sSource,
//             "data": aoData,
//             "success": fnCallback
//             } );
//         }
//        "ajax": 'terminal/list'
//        "serverSide": true,//服务器分页
            "lengthChange": false,//是否允许用户自定义显示数量
//        "dom": '<"top"f<"clear">>rt<"bottom"ilp<"clear">>',
//        "dom": '<"top"f>rt<"bottom"ip><"clear">',
//            "dom":'<"wrapper"flipt>, ',
            "ajax": {
                "url": "/terminal/list",
                "dataSrc": "data"
//            success: function (data) {
////                table.ajax.reload();
////                $("#myModal").modal("hide");
////                $("#myModalLabel").text("新增");
////                clear();
////                console.log("结果" + data);
//            }
            },
            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true
                    },
                    "bSortable": false,
                    "orderable": false,
                },
//            {
//                "sClass": "text-center",
//                "data": "ID",
//                "render": function (data, type, full, meta) {
//                    return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
//                },
//                "bSortable": false
//            },
//            { data: 'id'},
                {data: 'deptName'},
                {data: 'baseTerminalId'},
                {data: 'createBy'},
                {data: 'lastUpdateAt'},
                {data: 'deptId'}
            ],

//        "columnDefs": [
//            {
//                orderable: false,
//
//                targets: 0 },
//            {
//                orderable: false,
//
//                targets: 1 }
//        ],//第一列与第二列禁止排序
//
//        "order": [
//            [0, null]
//        ],//第一列排序图标改为默认
            'columnDefs': [
//            {
//                targets: 3,
//                render: function (a, b, c, d) {
//                    var context =
//                        {
//                            func: [
//                                {"name": "修改", "fn": "edit(\'" + c.name + "\',\'" + c.position + "\',\'" + c.salary + "\',\'" + c.start_date + "\',\'" + c.office + "\',\'" + c.extn + "\')", "type": "primary"},
//                                {"name": "删除", "fn": "del(\'" + c.name + "\')", "type": "danger"}
//                            ]
//                        };
//                    var html = template(context);
//                    return context;
//                }
//            },
//            {
//                "targets": 0,
////                "searchable": false,
//                'checkboxes': {
//                    'selectRow': true
//                }
//            },
//            {
//                "targets": 1,
//                "data": null,
//                "defaultContent": "<button>Click!</button>"
//            }
            ],
            'select': {
                'style': 'multi'
            },
            'order': [[0, 'asc']],
//        initComplete: function () {
//            var api = this.api();
//            api.columns().indexes().flatten().each( function ( i ) {
//                var column = api.column( i );
//                var select = $('<select><option value=""></option></select>')
//                    .appendTo( $(column.footer()).empty() )
//                    .on( 'change', function () {
////                        var val = $.fn.dataTable.util.escapeRegex(
////                            $(this).val()
////                        );
////                        column
////                            .search( val ? '^'+val+'$' : '', true, false )
////                            .draw();
//                    } );
//                column.data().unique().sort().each( function ( d, j ) {
//                    select.append( '<option value="'+d+'">'+d+'</option>' )
//                } );
//            } );
//        }
        });
//    table.columns().eq( 0 ).each( function ( colIdx ) {
//        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
//            table
//                .column( colIdx )
//                .search( this.value )
//                .draw();
//        } );
//    } );

        $('#example tbody').on('click', 'tr', function () {
            debugger
            $(this).toggleClass('selected');
        });

        $('#button').click(function () {
            alert(table.rows('.selected').data().length + ' row(s) selected');
        });
    });


    //$(".checkall").click(function () {
    //    var check = $(this).prop("checked");
    //    $(".checkchild").prop("checked", check);
    //});
    //获取选中的某一个checkbox的值
    //
    //if ($(".checkchild:checked").length > 1)
    // {
    // alert("一次只能修改一条数据");                return;           }
    //
    //var id = $(".checkchild:checked").val();
</script>


</body>

</html>
